<template>
    <div>
        <div class="content">
            <vxe-form :data="toolbarData" :items="formItems" titleColon>
                <!-- 打印模板配置 -->
                <template #printDesignSlot="{ data }">
                    <vxe-input class="edit-popup-input" v-model="data.printDesign.setPrintTemplateConfig" placeholder="打印模板设计" @click="popupEvent"></vxe-input>
                    <vxe-modal show-footer destroy-on-close class-name="vxe-table--ignore-clear edit-popup-box" width="800px" height="600px" v-model="interiorModalVisible">
                        <template #default>
                            <vxe-form :data="data.printDesign.setPrintTemplateConfig" :items="printDesignFormItems" titleColon></vxe-form>
                            <el-tabs v-model="beforeClick">
                                <el-tab-pane label="点击模板设计按钮时调用" name="beforeClick">
                                    <monaco-editor v-model="toolbarData.printDesign.setPrintTemplateConfig.beforeClick" :height="paneHeight" language="javascript" />
                                </el-tab-pane>
                                <el-tab-pane label="额外配置" name="extConfig">
                                    <monaco-editor v-model="toolbarData.printDesign.setPrintTemplateConfig.extConfig" :height="paneHeight" language="json" @blur="printTemplateExt" />
                                </el-tab-pane>
                            </el-tabs>
                        </template>
                    </vxe-modal>
                </template>
                <!-- 预览打印配置 -->
                <template #previewPrintSlot="{ data }">
                    <vxe-input class="edit-popup-input" v-model="data.printDesign.previewPrintConfig" placeholder="预览打印配置" @click="previewPrintPopupEvent"></vxe-input>
                    <vxe-modal show-footer destroy-on-close class-name="vxe-table--ignore-clear edit-popup-box" width="800px" height="600px" v-model="previewPrintModalVisible">
                        <template #default>
                            <vxe-form :data="data.printDesign.previewPrintConfig" :items="previewPrintFormItems" titleColon></vxe-form>
                            <el-tabs v-model="preview">
                                <el-tab-pane label="额外配置" name="extConfig">
                                    <monaco-editor v-model="toolbarData.printDesign.previewPrintConfig.extConfig" :height="paneHeight" language="json" @blur="previewPrintExt" />
                                </el-tab-pane>
                            </el-tabs>
                        </template>
                    </vxe-modal>
                </template>
                <!-- 直接打印配置 -->
                <template #directPrintSlot="{ data }">
                    <vxe-input class="edit-popup-input" v-model="data.printDesign.directPrintConfig" placeholder="直接打印配置" @click="directPrintPopupEvent"></vxe-input>
                    <vxe-modal show-footer destroy-on-close class-name="vxe-table--ignore-clear edit-popup-box" width="800px" height="600px" v-model="directPrintModalVisible">
                        <template #default>
                            <vxe-form :data="data.printDesign.directPrintConfig" :items="directPrintFormItems" titleColon></vxe-form>
                            <el-tabs v-model="direct">
                                <el-tab-pane label="额外配置" name="extConfig">
                                    <monaco-editor v-model="toolbarData.printDesign.directPrintConfig.extConfig" :height="paneHeight" language="json" @blur="directPrintExt" />
                                </el-tab-pane>
                            </el-tabs>
                        </template>
                    </vxe-modal>
                </template>
            </vxe-form>
        </div>
        <el-card style="overflow: auto">
            <el-tabs v-model="activeName">
                <el-tab-pane v-for="(methodName, index) in toolbarMethod" :key="index" :name="methodName.field" :label="methodName.title">
                    <monaco-editor v-model="toolbarData[methodName.field]" :height="paneHeight" language="javascript" />
                </el-tab-pane>
                <el-tab-pane label="打印数据查询" name="printQuery">
                    <vxe-form :data="toolbarData.printDesign">
                        <vxe-form-item title="接口名称" span="6">
                            <template #default>
                                <vxe-input v-model="toolbarData.printDesign.printDataQueryPort" placeholder="请输入查询打印数据的接口名称" clearable></vxe-input>
                            </template>
                        </vxe-form-item>
                    </vxe-form>
                    <el-tabs v-model="queryPane">
                        <el-tab-pane label="查询之前处理函数" name="printDataQueryBefore">
                            <monaco-editor v-model="toolbarData.printDesign.printDataQueryBefore" :height="queryPaneHeight" language="javascript" />
                        </el-tab-pane>
                        <el-tab-pane label="查询之后处理函数" name="printDataQueryAfter">
                            <monaco-editor v-model="toolbarData.printDesign.printDataQueryAfter" :height="queryPaneHeight" language="javascript" />
                        </el-tab-pane>
                    </el-tabs>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<script setup lang="ts">
    import { ref, reactive } from "vue";
    import { MonacoEditor } from "@/components/MonacoEditor";
    import { toolbarDataDefault } from "./propsDefault";
    import XEUtils from "xe-utils";
    import { difference } from "@/utils/index";
    const activeName = ref("className");
    const queryPane = ref("printDataQueryBefore");
    const beforeClick = ref("beforeClick");
    const preview = ref("extConfig");
    const direct = ref("extConfig");
    const props = defineProps({
        toolbarData: {
            type: Object,
            default: toolbarDataDefault,
        },
    });
    console.log("aaaaaaaaaaaaaaa", props.toolbarData);
    const paneHeight = ref(document.documentElement.scrollHeight - 530 + "px");
    const queryPaneHeight = ref(document.documentElement.scrollHeight - 634 + "px");

    function JSONStr(json: Object) {
        return JSON.stringify(
            json,
            (key, value) => {
                if (value == "{}") {
                    return undefined;
                }
                return value;
            },
            1
        );
    }

    // 处理额外配置
    const excludeTemplate = ["disabled", "content", "size", "beforeClick", "queryProvider", "queryPanel", "extConfig"];
    const excludePreview = ["disabled", "content", "size", "queryPanel", "params", "extConfig"];
    const excludeDirect = ["disabled", "content", "size", , "queryPanel", "extConfig"];
    // 模板设计额外参数
    const templateExtConfig = difference(Object.keys(props.toolbarData.printDesign.setPrintTemplateConfig), excludeTemplate);
    XEUtils.objectEach(templateExtConfig, (item, key) => {
        props.toolbarData.printDesign.setPrintTemplateConfig.extConfig[item] = props.toolbarData.printDesign.setPrintTemplateConfig[item];
    });
    // props.toolbarData.printDesign.setPrintTemplateConfig.extConfig = JSON.stringify(props.toolbarData.printDesign.setPrintTemplateConfig.extConfig, null, 1);
    props.toolbarData.printDesign.setPrintTemplateConfig.extConfig = JSONStr(props.toolbarData.printDesign.setPrintTemplateConfig.extConfig) == "{}" ? undefined : JSONStr(props.toolbarData.printDesign.setPrintTemplateConfig.extConfig);
    // 预览打印配置额外参数
    const previewExtConfig = difference(Object.keys(props.toolbarData.printDesign.previewPrintConfig), excludePreview);
    XEUtils.objectEach(previewExtConfig, (item, key) => {
        props.toolbarData.printDesign.previewPrintConfig.extConfig[item] = props.toolbarData.printDesign.previewPrintConfig[item];
    });
    // props.toolbarData.printDesign.previewPrintConfig.extConfig = JSON.stringify(props.toolbarData.printDesign.previewPrintConfig.extConfig, null, 1);
    props.toolbarData.printDesign.previewPrintConfig.extConfig = JSONStr(props.toolbarData.printDesign.previewPrintConfig.extConfig) == "{}" ? undefined : JSONStr(props.toolbarData.printDesign.previewPrintConfig.extConfig);
    // 直接打印配置额外参数
    const directExtConfig = difference(Object.keys(props.toolbarData.printDesign.directPrintConfig), excludeDirect);
    XEUtils.objectEach(directExtConfig, (item, key) => {
        props.toolbarData.printDesign.directPrintConfig.extConfig[item] = props.toolbarData.printDesign.directPrintConfig[item];
    });
    // props.toolbarData.printDesign.directPrintConfig.extConfig = JSON.stringify(props.toolbarData.printDesign.directPrintConfig.extConfig, null, 1);
    props.toolbarData.printDesign.directPrintConfig.extConfig = JSONStr(props.toolbarData.printDesign.directPrintConfig.extConfig) == "{}" ? undefined : JSONStr(props.toolbarData.printDesign.directPrintConfig.extConfig);

    const toolbarMethod = [
        { field: "className", title: "给工具栏 className" },
        { field: "custom", title: "自定义列配置" },
        { field: "buttons", title: "左侧按钮列表" },
        { field: "tools", title: "右侧工具列表" },
    ];

    const formItems = reactive([
        {
            field: "size",
            title: "尺寸",
            span: 4,
            itemRender: {
                name: "$select",
                options: [
                    { value: "medium", label: "medium" },
                    { value: "small", label: "small" },
                    { value: "mini", label: "mini" },
                ],
                props: { placeholder: "请选择" },
            },
        },
        { field: "loading", title: "是否加载中", span: 4, itemRender: { name: "$switch", props: { openLabel: "是", closeLabel: "否" } } },
        { field: "perfect", title: "配套的样式", span: 4, itemRender: { name: "$switch", props: { openLabel: "是", closeLabel: "否" } } },
        { field: "enabled", title: "是否启用", span: 4, itemRender: { name: "$switch", props: { openLabel: "是", closeLabel: "否" } } },
        { field: "import", title: "导入按钮配置", span: 4, itemRender: { name: "$input", props: { placeholder: "请输入" } } },
        { field: "export", title: "导出按钮配置", span: 4, itemRender: { name: "$input", props: { placeholder: "请输入" } } },
        { field: "print", title: "打印按钮配置", span: 4, itemRender: { name: "$input", props: { placeholder: "请输入" } } },
        { field: "refresh", title: "刷新按钮配置", span: 4, itemRender: { name: "$input", props: { placeholder: "请输入" } } },
        { field: "zoom", title: "是否允许最大化显示", span: 4, itemRender: { name: "$input", props: { placeholder: "请输入" } } },
        { field: "slots.buttons", title: "插槽按钮列表", span: 4, itemRender: { name: "$input", props: { placeholder: "请输入" } } },
        { field: "slots.tools", title: "插槽右侧工具列表", span: 4, itemRender: { name: "$input", props: { placeholder: "请输入" } } },
        { field: "printDesign.printApi.queryPanel", title: "模板查询接口ID", span: 4, itemRender: { name: "$input", props: { placeholder: "请输入打印时模板查询接口id" } } },
        { field: "printDesign.setPrintTemplate", title: "模板设计", span: 8, itemRender: { name: "$input", props: { placeholder: "请输入" } } },
        { field: "printDesign.previewPrint", title: "预览打印", span: 8, itemRender: { name: "$input", props: { placeholder: "请输入" } } },
        { field: "printDesign.directPrint", title: "直接打印", span: 8, itemRender: { name: "$input", props: { placeholder: "请输入" } } },
        { field: "printDesign.setPrintTemplateConfig", title: "打印模板设计", span: 4, slots: { default: "printDesignSlot" } },
        { field: "printDesign.previewPrintConfig", title: "预览打印配置", span: 4, slots: { default: "previewPrintSlot" } },
        { field: "printDesign.directPrintConfig", title: "直接打印配置", span: 4, slots: { default: "directPrintSlot" } },
    ]);
    // 模板设计
    const printDesignFormItems = reactive([
        { field: "enabled", title: "是否启用", span: 8, itemRender: { name: "$input", props: { placeholder: "请输入" } } },
        {
            field: "size",
            title: "尺寸",
            span: 8,
            itemRender: {
                name: "$select",
                options: [
                    { value: "medium", label: "medium" },
                    { value: "small", label: "small" },
                    { value: "mini", label: "mini" },
                ],
                props: { placeholder: "请选择" },
            },
        },
        { field: "queryProvider", title: "拖拽面板查询接口", span: 12, itemRender: { name: "$input", props: { placeholder: "请输入面板id" } } },
        { field: "queryPanel", title: "模板查询接口", span: 12, itemRender: { name: "$input", props: { placeholder: "请输入模板id" } } },
        { field: "content", title: "按钮名称", span: 12, itemRender: { name: "$input", props: { placeholder: "请输入" } } },
    ]);
    const interiorModalVisible = ref(false);
    const popupEvent = () => {
        interiorModalVisible.value = true;
    };
    const printTemplateExt = () => {
        props.toolbarData.printDesign.setPrintTemplateConfig = { ...props.toolbarData.printDesign.setPrintTemplateConfig, ...JSON.parse(props.toolbarData.printDesign.setPrintTemplateConfig?.extConfig) };
    };
    // 预览打印
    const previewPrintFormItems = reactive([
        { field: "enabled", title: "是否启用", span: 8, itemRender: { name: "$input", props: { placeholder: "请输入" } } },
        {
            field: "size",
            title: "尺寸",
            span: 8,
            itemRender: {
                name: "$select",
                options: [
                    { value: "medium", label: "medium" },
                    { value: "small", label: "small" },
                    { value: "mini", label: "mini" },
                ],
                props: { placeholder: "请选择" },
            },
        },
        { field: "queryPanel", title: "模板查询接口", span: 12, itemRender: { name: "$input", props: { placeholder: "请输入模板id" } } },
        { field: "content", title: "按钮名称", span: 12, itemRender: { name: "$input", props: { placeholder: "请输入" } } },
        { field: "params.printerName", title: "保存的打印机键名", span: 12, itemRender: { name: "$input", props: { placeholder: "请输入" } } },
        { field: "params.printTitle", title: "打印名称", span: 12, itemRender: { name: "$input", props: { placeholder: "请输入" } } },
    ]);
    const previewPrintModalVisible = ref(false);
    const previewPrintPopupEvent = () => {
        previewPrintModalVisible.value = true;
    };
    const previewPrintExt = () => {
        props.toolbarData.printDesign.previewPrintConfig = { ...props.toolbarData.printDesign.previewPrintConfig, ...JSON.parse(props.toolbarData.printDesign.previewPrintConfig?.extConfig) };
    };
    // 直接打印
    const directPrintFormItems = reactive([
        { field: "enabled", title: "是否启用", span: 8, itemRender: { name: "$input", props: { placeholder: "请输入" } } },
        {
            field: "size",
            title: "尺寸",
            span: 8,
            itemRender: {
                name: "$select",
                options: [
                    { value: "medium", label: "medium" },
                    { value: "small", label: "small" },
                    { value: "mini", label: "mini" },
                ],
                props: { placeholder: "请选择" },
            },
        },
        { field: "queryPanel", title: "模板查询接口", span: 12, itemRender: { name: "$input", props: { placeholder: "请输入模板id" } } },
        { field: "content", title: "按钮名称", span: 12, itemRender: { name: "$input", props: { placeholder: "请输入" } } },
    ]);
    const directPrintModalVisible = ref(false);
    const directPrintPopupEvent = () => {
        directPrintModalVisible.value = true;
    };
    const directPrintExt = () => {
        props.toolbarData.printDesign.directPrintConfig = { ...props.toolbarData.printDesign.directPrintConfig, ...JSON.parse(props.toolbarData.printDesign.directPrintConfig?.extConfig) };
    };
</script>
<style lang="scss" scoped>
    .content {
        padding: 10px;
        box-shadow: var(--el-box-shadow-light);
        border-radius: var(--el-card-border-radius);
        border: 1px solid var(--el-card-border-color);
        background-color: var(--el-card-bg-color);
        overflow: hidden;
        color: var(--el-text-color-primary);
        transition: var(--el-transition-duration);
    }
    .edit-popup-modal {
        display: flex;
        align-items: center;
    }
    .edit-popup-input {
        width: auto;
        flex-grow: 1;
    }
    .edit-popup-button {
        flex-shrink: 0;
    }
</style>
